<template>
	<view>
		<!-- 导航栏 -->
		<view class="search">
			<view class="search-input">
				<image src="../../static/icon/search.png" mode="" class="search-icon"></image>
				<input type="text" placeholder="请输入小区名或地址" placeholder-class="placeHolderClass" v-model="content" confirm-type="search" @confirm="searchHome" />
				<view class="close-icon" @tap="clear" v-if="content.length > 0">
					<image src="../../static/icon/close.png" mode="" ></image>
				</view>
			</view>
			<!-- 选项卡 -->
			<view class="home-tab">
				<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
					<view v-for="(item,index) in tabList" :key="item.id" class="nav-item" :class="{current: index === tabCurrentIndex}"
					 :id="'tab'+index" @click="changeTab(index)">{{item.name}}</view>
				</scroll-view>
			</view>
		</view>
		<!-- 搜索结果 -->
		<mescroll-uni :down="downOption" @down="downCallback" :marginTop="top">
		<swiper :current="tabCurrentIndex" duration="300" @change="swiperChange" style="height: calc(100vh - 180rpx);">
			<swiper-item v-for="(it,index) in tabList" :key="index">
					<scroll-view class="homeList" scroll-y style="height: calc(100vh - 180rpx);" @scrolltolower="loadMore" v-if="isNoData == 2">
						<view class="home-info" v-for="(item,index) in homeList" :key="index" v-if="houseType !==3" @click="checkDetail(item.houseId)">
							<view class="home-pic">
								<image :src="item.picUrl[0]" lazy-load="true"></image>
							</view>
							<view class="home-detail">
								<view class="homeName"><text>{{item.houseName}}</text></view>
								<view class="home-address"><text space="nbsp">{{item.provinceString}} |{{item.areaName}} |{{item.buildNum}}栋{{item.roomNum}}</text></view>
								<view class="home-tips">
									<view :class="[{'tips-1':labIndex == 0,'tips-2':labIndex == 1,'tips-3':labIndex == 2}]" v-for="(it,labIndex) in item.label" :key="labIndex"><text>{{it}}</text></view>
								</view>
								<view class="home-price" v-if="houseType == 1"><text>{{item.price}}万({{item.acreage}}m²|{{item.unitPrice}}元/m²)</text></view>
								<view class="home-price" v-if="houseType == 2">
									<text>{{ item.rental }}元/月({{ item.acreage }}m²)</text>
								</view>
							</view>
						</view>
						<view class="home-info" v-for="(item,index) in homeList" :key="index" v-if="houseType ==3" @click="checkDetail(item.areaId)">
							<view class="home-pic">
								<image :src="item.picUrl[0]" lazy-load="true"></image>
							</view>
							<view class="home-detail">
								<view class="homeName"><text>{{item.areaName}}</text></view>
								<view class="home-address"><text space="nbsp">{{item.provinceString}}</text></view>
								<view class="home-tips">
									<view :class="[{'tips4':labIndex == 0,'tips5':labIndex !== 0}]" v-for="(it,labIndex) in item.label" :key="labIndex"><text>{{it}}</text></view>
								</view>
								<view class="home-price"><text>{{item.price}}元/m²(楼盘均价)</text></view>
							</view>
						</view>
						<!-- 加载 -->
						<uni-load-more :status="status" :contentText="contentText"></uni-load-more>	
					</scroll-view>
					<view v-if="isNoData == 1" class="noData">
						<view class="nodata-img">
							<image src="../../static/icon/nodata.png" mode=""></image>
						</view>
						<view class="nodata-content"><text>暂无数据哦～</text></view>
					</view>
			</swiper-item>
		</swiper>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue'	
	export default {
		name:'search',
		components:{
			MescrollUni,uniLoadMore
		},
		data(){
			return{
				homeList:[],
				isNoData:0,
				downOption: {
					auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				tabList:[
					{id:1,name:'二手房'},
					{id:2,name:'新房'},
					{id:3,name:'租房'},
				],
				tabCurrentIndex: 0,
				page:0,
				status: 'loading',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				top:'180rpx',	
				content:'',
				houseType:1
			}
		},
		methods:{
			// 点击选项卡
			changeTab(index){
				if(this.tabCurrentIndex !== index){
					this.tabCurrentIndex = index
				}
			},
			// 滑动切换
			swiperChange(e) {
				this.tabCurrentIndex = e.target.current;
				this.page = 0;
				this.hasFlag = true;
				this.status = 'loading'
				this.homeList = [];
				if(this.tabCurrentIndex == 0){
					this.houseType = 1
					this.isNoData = 0
				}else if(this.tabCurrentIndex == 1){
					this.houseType = 3
					this.isNoData = 0
				}else if(this.tabCurrentIndex == 2){
					this.houseType = 2
					this.isNoData = 0
				}
			},
			// 搜索
			searchHome(e){
				if(this.content){
					this.page = 0;
					this.hasFlag = true;
					this.status = 'loading';
					this.homeList = [];
					if (this.houseType == 1) {
						this.getOnlyEntrust();
					} else if (this.houseType == 3) {
						this.getNewHouseList();
					} else if (this.houseType == 2) {
						this.getOldHouseList();
					}
				}else{
					uni.showToast({
						icon:'none',
						title:'搜索内容不能为空'
					})
				}
				// 根据搜索结果改变isNoData的值1-无数据 2-有数据
			},
			// 清空搜索内容
			clear(){
				this.content = ''
			},
			// 获取二手房列表
			async getOnlyEntrust() {
				if (!this.hasFlag) return; // 说明已经没有更多
				this.page = ++this.page;
				let res = await this.$fetch(
					this.$api.oldHouseCondition2,
					{
						pageNum: this.page,
						entrust: 2,
						houseName: this.content,
						pageSize: 10
					},
					'GET'
				);
				res.rows.forEach(item => {
					if (item.picUrl) {
						item.picUrl = item.picUrl.split(',');
					}
					if (item.label) {
						item.label = item.label.split(',');
					}
				});
				if (res.total) {
					this.isNoData = 2;
				} else {
					this.isNoData = 1;
				}
				this.homeList = [...this.homeList, ...res.rows];
				this.hasFlag = 10 * this.page < res.total;
				if (!this.hasFlag) {
					this.status = 'noMore';
				}
			},
			// 获取新房列表
			async getNewHouseList() {
				if (!this.hasFlag) return; // 说明已经没有更多
				this.page = ++this.page;
				let res = await this.$fetch(
					this.$api.areaCondition,
					{
						pageNum: this.page,
						areaName: this.content,
						room1: this.room1,
						pageSize: 10
					},
					'GET'
				);
				res.rows.forEach(item => {
					if (item.picUrl) {
						item.picUrl = item.picUrl.split(',');
					}
					if (item.label) {
						item.label = item.label.split(',');
					}
				});
				if (res.total) {
					this.isNoData = 2;
				} else {
					this.isNoData = 1;
				}
				this.homeList = [...this.homeList, ...res.rows];
				this.hasFlag = 10 * this.page < res.total;
				if (!this.hasFlag) {
					this.status = 'noMore';
				}
			},
			// 获取租房列表
			async getOldHouseList() {
				if (!this.hasFlag) return; // 说明已经没有更多
				this.page = ++this.page;
				let res = await this.$fetch(
					this.$api.oldHouseCondition1,
					{
						pageNum: this.page,
						houseName: this.content,
						room1: this.room1,
						pageSize: 10
					},
					'GET'
				);
				res.rows.forEach(item => {
					if (item.picUrl) {
						item.picUrl = item.picUrl.split(',');
					}
					if (item.label) {
						item.label = item.label.split(',');
					}
				});
				if (res.total) {
					this.isNoData = 2;
				} else {
					this.isNoData = 1;
				}
				this.homeList = [...this.homeList, ...res.rows];
				this.hasFlag = 10 * this.page < res.total;
				console.log(this.hasFlag);
				if (!this.hasFlag) {
					this.status = 'noMore';
				}
			},
			// 查看房源详情
			checkDetail(id){
				if(this.houseType == 1){
					uni.navigateTo({
						url:'../oldHouse/oldHouse?houseId='+id+'&houseType=2'
					})
				}else if(this.houseType == 2){
					uni.navigateTo({
						url:'../oldHouse/oldHouse?houseId='+id+'&houseType=1'
					})
				}else if(this.houseType == 3){
					uni.navigateTo({
						url:'../newHouse/newHouse?houseId='+id+'&houseType=3'
					})
				}
			},
			// 加载更多
			loadMore() {
				if (this.hasFlag) {
					if (this.houseType == 1) {
						this.getOnlyEntrust();
					} else if (this.houseType == 3) {
						this.getNewHouseList();
					} else if (this.houseType == 2) {
						this.getOldHouseList();
					}
				} else {
					this.status = 'noMore';
				}
			},
			// 下拉刷新
			downCallback(mescroll) {
				this.page = 0;
				this.hasFlag = true;
				this.status = 'loading';
				this.homeList = [];
				if (this.houseType == 1) {
					this.getOnlyEntrust();
				} else if (this.houseType == 2) {
					this.getNewHouseList();
				} else if (this.houseType == 3) {
					this.getOldHouseList();
				}
				mescroll.endSuccess();
			},
		}
	}
</script>

<style lang="scss">
	.search{
		width: 100%;
		height: 180rpx;
		background: #FFFFFF;
		position: fixed;
		top:0;
		z-index: 99;
		border-bottom: 2rpx solid #F0F0F0;
	}
	.search-input{
		width: 630rpx;
		height: 72rpx;
		border-radius: 8rpx;
		background: #F1F2F4;
		display: flex;
		flex-direction: row;
		margin: 0 60rpx;
		align-items: center;
	}
	.search-icon{
		width: 28rpx;
		height: 28rpx;
		margin: 0 10rpx 0 30rpx;
	}
	.search-input input{
		width: 496rpx;
		height: 72rpx;
		line-height: 72rpx;
		color: #333333;
		font-size: 24rpx;
		letter-spacing: 0.28rpx;
	}
	.close-icon{
		margin-right: 30rpx;
		width: 36rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
	}
	.close-icon image{
		width: 36rpx;
		height: 36rpx;
	}
	.placeholderClass{
		color: #A6A6A6;
	}
	.home-tab{
		width: 100%;
		margin-top: 18rpx;
		height: 90rpx;
		background: #FFFFFF;
		position: relative;
		z-index: 10;
		// border-bottom: 2rpx solid #F0F0F0;
	}
	.nav-bar{
		position: relative;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		background-color: #fff;
		
		.nav-item {
			display: inline-block;
			width: 250upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			font-size: 28upx;
			color: #A6A6A6;
			position: relative;
		
			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 6upx solid #874A98;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}
		
		.current {
			color: #874A98;
			font-size: 28upx;
			font-weight: bold;
		
			&:after {
				width: 30%;
			}
		}
	}
    .homeList {
		width: 100%;
		background: #FFFFFF;
		// margin-top:266rpx;
		.home-info {
			display: flex;
			flex-direction: row;
			margin-left: 30rpx;
			// padding-top: 40rpx;
			height: 250rpx;
			// padding-bottom: 30rpx;
			border-bottom: 2rpx solid #F7F7F7;
		}
	}
	
	.home-pic {
		width: 240rpx;
		height: 180rpx;
		margin-right: 30rpx;
		margin-top: 40rpx;
		border-radius: 4rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url('');
	}
	
	.home-pic image {
		width: 240rpx;
		height: 180rpx;
		border-radius: 4rpx;
	}
	
	.home-detail {
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
	
		.homeName {
			width: 420rpx;
			font-size: 28rpx;
			color: #5B5B5B;
			text-align: justify;
			letter-spacing: 0;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			font-weight: bold;
		}
	
		.home-address {
			width: 420rpx;
			font-size: 24rpx;
			color: #A6A6A6;
			letter-spacing: 0;
			text-align: justify;
			margin-top: 8rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	
		.home-tips {
			display: flex;
			flex-direction: row;
			margin-top: 10rpx;
	
			.tips-1 {
				background: rgba(241, 78, 44, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #F14E2C;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
	
			.tips-2 {
				background: rgba(74, 144, 226, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #4A90E2;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
	
			.tips-3 {
				background: rgba(211, 160, 221, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #800080;
				letter-spacing: 0;
				text-align: justify;
				height: 36rpx;
				line-height: 36rpx;
			}
			
			.tips4{
				background: #48D2AB;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
			
			.tips5{
				background: rgba(74, 144, 226, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #4A90E2;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
		}
	
		.home-price {
			font-size: 28rpx;
			color: #FE9E2E;
			letter-spacing: 0;
			text-align: justify;
			font-size: 24rpx;
			margin-top: 12rpx;
		}
	}
	
	.tips-1 text {
		margin: 0 10rpx;
	}
	
	.tips-2 text {
		margin: 0 10rpx;
	}
	
	.tips-3 text {
		margin: 0 10rpx;
	}
	.tips4 text{
		margin: 0 10rpx;
	}
	.tips5 text{
		margin: 0 10rpx;
	}
	.noData{
		background: #FFFFFF;
		width: 100%;
		display: flex;
		flex-direction: column;
		
		.nodata-img{
			width: 100%;
			height: 325.6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 100rpx;
			
			image{
				width: 300rpx;
				height: 325.6rpx;
			}
		}
		
		.nodata-content{
			width: 100%;
			margin-top: 40.4rpx;
			font-size: 24rpx;
			color: #A6A6A6;
			text-align: center;
		}
	}	
</style>
